<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全选效果</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css"/>

    <script>
        //1.找到全选框的状态
        //2.把其他多选框设置成全选框的状态
        function switchItem() {
            var checkAll = document.getElementById('check-all');
            var items = document.getElementsByClassName('check-item');
            //因为是多个多选框，所以需要遍历，不需要下标，可以用forof循环
            for (var item of items){
                item.checked = checkAll.checked ;
            }
        }

    </script>

    <style>
        body, ul, li, div, p, h1, h2 {
            margin: 0;
            pading: 0;
        }

        ul, li, ol {
            list-style: none;
        }

        .goodList {
            background: url("images/list_bg.gif") no-repeat;
            overflow: hidden;
        }
        .goodList ul:nth-of-type(1) {
            margin-top: 45px;
        }
        .goodList ul:nth-of-type(2) {
            margin-top: 20px;
        }

        .goodList ul li:nth-of-type(1) {
            text-align: center;
            vertical-align: middle;
        }
        .goodList ul li:nth-of-type(2) {
            margin-left: 80px;
        }
        .goodList ul li:nth-of-type(3) {
            margin-left: 80px;
        }

        .goodList ul li:nth-of-type(4) {
            margin-left: 100px;
        }

        .goodList ul:nth-of-type(1) li:nth-of-type(3) {
            margin-left: 155px;
        }
        .goodList ul:nth-of-type(1) li:nth-of-type(4) {
            margin-left: 140px;
        }
        .goodList ul:nth-of-type(2) li:nth-of-type(4) {
            margin-left: 100px;
        }
        .goodList ul:nth-of-type(3) li:nth-of-type(4) {
            margin-left: 50px;
        }
        .goodList ul:nth-of-type(4) li:nth-of-type(4) {
            margin-left: 100px;
        }
        .goodList ul:nth-of-type(5) li:nth-of-type(4) {
            margin-left: 155px;
        }



        .goodList ul li {
            font-family: "微软雅黑";
            font-size: 12px;
            color: #666666;
            text-align: center;
            line-height: 25px;
            float: left;
        }

        .goodList ul:after {
            content: ''; /*在clear类后面添加内容为空*/
            display: block; /*把添加的内容转化为块元素*/
            clear: both; /*清除这个元素两边的浮动*/
        }


    </style>


</head>
<body>

<div class="">

    <form class="goodList">
        <ul>
            <li><input type="checkbox" id="check-all" onclick="switchItem();" >全选</li>
            <li>商品图片</li>
            <li>商品名称/出售者/联系方式</li>
            <li>价格</li>
        </ul>
        <ul>
            <li><input type="checkbox" class="check-item"></li>
            <li><img src="images/list0.jpg"></li>
            <li>杜比环绕，家庭影院必备，超真实享受<br>出售者：ling112233
                <br> <img src="images/online_pic.gif"> <img src="images/list_tool_fav1.gif">收藏
            </li>
            <li>一口价<br>2833.0</li>
        </ul>
        <ul>
            <li><input type="checkbox" class="check-item"></li>
            <li><img src="images/list1.jpg"></li>
            <li>NVDIA 9999GT 512MB 256bit极品显卡，不容错过<br>出售者：aipiaopiao110
                <br> <img src="images/online_pic.gif"> <img src="images/list_tool_fav1.gif">收藏
            </li>
            <li>一口价<br>2833.0</li>
        </ul>
        <ul>
            <li><input type="checkbox" class="check-item"></li>
            <li><img src="images/list2.jpg"></li>
            <li>精品热卖，高清晰，30寸等离子电视<br>出售者：阳光的挣扎
                <br> <img src="images/online_pic.gif"> <img src="images/list_tool_fav1.gif">收藏
            </li>
            <li>一口价<br>2833.0</li>
        </ul>
        <ul>
            <li><input type="checkbox" class="check-item"></li>
            <li><img src="images/list3.jpg"></li>
            <li>Sony索尼家用最新款笔记本<br>出售者：疯狂的镜无
                <br> <img src="images/online_pic.gif"> <img src="images/list_tool_fav1.gif">收藏
            </li>
            <li>一口价<br>2833.0</li>
        </ul>



    </form>
</div>
</body>
</html>